<template>
<div class="sideCollapse" id="domColapse">
    <i :class="{ 'el-icon-s-unfold': !opened, 'el-icon-s-fold': opened }" @click="toggleOpen()"></i>
</div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
    computed: {
        // 将 vuex 中 state 里面的 opened 属性 映射 到 当前组件
        ...mapState(['opened'])
    },
    methods: {
        // Mutations 辅助函数
        ...mapMutations(['setSideBarOpen']),

        toggleOpen() {
            // this.opened = !this.opened
            // this.$store.commit('setSideBarOpen')
            this.setSideBarOpen()
        }
    }
}
</script>

<style lang="scss" scoped>
.sideCollapse i {
    font-size: 18px;
    color: #363f44;
    cursor: pointer;
}
</style>